<template>
  <el-dialog :title="$t('TITLE.IMPORT') " :visible.sync="isDialogShow" :modal="true"
    :close-on-click-modal="closeOnclickModal" @close="close" class="import-excel-dialog">
    <!--表格-->
    <el-row class="mr-l">
      {{ importConfig.name }} <el-button type="text" class="txt-btn" @click="down">{{ $t('TIP.TEMPLATE_DOWNLOAD') }}</el-button>
    </el-row>
    <el-row class="mr-l">
      <el-upload ref="upload" class="upload" :action="importConfig.actionUrl" :on-error="handleError"
        :on-success="handleMoreSuccess" :on-remove="handleRemove" :file-list="fileList" :data="params"
        :auto-upload="false" :limit="1" accept=".xlsx,.xls">
        <div slot="tip" class="el-upload__tip">{{ $t('TIP.EXCEL_IMPORT_TIP') }}</div>
        <el-button slot="trigger" size="small" type="primary">{{ $t('BTN_NAME.CHOOSE_FILE') }}</el-button>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">
          {{ $t('BTN_NAME.SUBMIT_IMPORT') }}</el-button>
      </el-upload>
    </el-row>
  </el-dialog>
</template>
<script>
  import Cookies from 'js-cookie'
  import {
    mapGetters
  } from 'vuex'
  export default {
    name: 'RfImportFile',
    props: {
      isShow: {
        type: Boolean,
        default: false
      },
      importConfig: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        fileList: [],
        url: 'repair/v1/pc/maintain/importData',
        params: {},
        isDialogShow: false
      }
    },
    watch: {
      isShow(newValue) {
        this.isDialogShow = newValue
      }
    },
    computed: {
      ...mapGetters(["size", "closeOnclickModal"])
    },
    mounted() {
      this.params.access_token = Cookies.get('lms_token')
    },
    methods: {
      down() {
        location.href = this.importConfig.fileUrl
      },
      close() {
        this.$emit('update:isShow', false)
      },
      submitUpload() {
        this.$refs.upload.submit()
      },
      handleRemove(file, fileList) {
        console.log(file, fileList)
      },
      // 上传失败
      handleError(response) {
        this.$message({
          message: response.status + '' + response.msg,
          type: 'error'
        })
      },
      // 上传成功操作
      handleMoreSuccess(response, file, fileList) {
        console.log(response.resp_code)
        if (response.resp_code !== 200) {
          this.$message({
            message: response.resp_msg,
            type: 'warning'
          })
        } else {
          this.$message({
            message: response.resp_msg,
            type: 'success'
          })
        }
        this.$refs.upload.clearFiles()
        this.close()
        this.$emit('cb')
      }
    }
  }
</script>
<style lang="scss">
  .import-excel-dialog {
    .el-dialog{
      width: 24%;
      min-width: 400px;
    }
    .el-upload__tip {
      margin-top: 15px;
      color: #888;
    }
    .el-dialog__body{
      padding-top: 15px;
    }
    .mr-l {
      margin-bottom: 15px;
    }
  }
</style>